<template>
    <div class="cny-change-box">
        <div class="trade-item">
            <label class="item-label">CNY</label>
            <input :class="totalError !== ' ' ? 'item-input fn-input-error' : 'item-input'"
               type="text"
               v-number="{model: 'golden.total', precision: 2}"
               v-model="golden.total"
               @change="changeTotal"
               placeholder="请输入想买入的金额，单次不超过5万" 
            />
            <div class="ui-tip" v-show="totalError">
                <span class="error"> {{totalError}}</span>
            </div>
        </div>
        <img src="./img/trans-icon.png" alt="" width="26" class="trade-icon">
        <div class="trade-item select">
            <label class="item-label select-title">
                {{assetCode}}
            </label>
            <input :class="amountError !== ' ' ? 'item-input fn-input-error' : 'item-input'"
               type="number"
               v-model="golden.amount"
               @change="changeAmount"
               :placeholder="'请输入想买入的'+assetCode+'数量'" 
            />
            <div class="ui-tip" v-show="amountError">
                <span class="error"> {{amountError}}</span>
            </div>
        </div>
    </div>
</template>



<script type="text/babel">
    import Loading from '../../../../grsc-base/component/Loading.vue';
    import service from '../service'
    import filter from '../../../../grsc-base/util/filter';
    import mathtool from '../../../../grsc-base/util/mathtool';
    import format from '../../../common/format';

    export default {
        components: {
            Loading
        },
        data() {
            return {
                golden:{
                    amount:'',
                    total:''
                },
                totalError: ' ',
                amountError: ' '
            };
        },
        props:{
            assetCode:{
                type:String,
                default:'ACT'
            },
            price:{
                type:Number,
                default: 0
            },
            maxCount:{
                type: Number,
                default: 1000
            },
            minCount:{
                type: Number,
                default: 1
            },
            precision:{
                type: Number,
                default: 4
            }
        },
        created() {
        },
        methods: {
            changeTotal(){
                this.clearError()
                if ($.isNumeric(this.golden.total) === false || $.isNumeric(this.price) === false) {
                    return '';
                }
                let amount = filter.floorFixPrice(mathtool.division(this.golden.total, this.price),4);
                this.golden.amount = format.formatZeroSuffix(amount,this.precision);

                if(this.golden.total>this.maxCount){
                   this.totalError =  '不能超过交易最大值'
                   return;
                }
                if(this.golden.total<this.minCount){
                   this.totalError =  '不能低于交易最小值'
                   return;
                }

            },

            changeAmount(){
                this.clearError()
                if ($.isNumeric(this.golden.amount) === false || $.isNumeric(this.price) === false) {
                    return '';
                }

                let total = filter.floorFix(mathtool.multiplication(this.golden.amount, this.price), 2);

                this.golden.total =  format.formatZeroSuffix(total, 2);
                if(total>this.maxCount){
                   this.amountError =  '不能超过交易最大值'
                   return;
                }
                if(total<this.minCount){
                   this.amountError =  '不能低于交易最小值'
                   return;
                }
            },
            clearError(cbfn){
                this.amountError = ' '
                this.totalError =  ' '
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
.cny-change-box{
    .trade-item{
        position: relative;
        display: inline-block;
        width: 305px;
        .item-label {
            position: absolute;
            right: 20px;
            top: 8px;
            font-weight: bold;
            width: auto;
        }
        .item-input {
            display: inline-block;
            width: 100%;
        }
    }
    .trade-icon {
        padding: 0 16px;
    }
    .ui-tip{
        position: absolute;
    }
}
</style>